<template>
  <div class="main" direction="column" align="stretch">
    <div class="body">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="menuName" label="菜单" align="center">
        </el-table-column>
        <el-table-column prop="childMenu" label="子菜单" align="center">
          <template slot-scope="scope"> --- </template>
        </el-table-column>
        <el-table-column prop="type" label="菜单类型" align="center">
          <template slot-scope="scope">
            {{
              scope.row.menuType == 1
                ? "目录"
                : scope.row.menuType == 2
                ? "菜单"
                : scope.row.menuType == 3
                ? "按钮"
                : scope.row.menuType == 4
                ? "特殊"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { queryCrmMenu, upMenuStatus } from "@/api/admin/config.js";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      queryCrmMenu().then((res) => {
        this.tableData = res.data;
      });
    },
    handleStatusChange(row) {
      let text = row.status == 0 ? "停用" : "启用";
      this.$confirm(
        '确认要"' + text + '""' + row.menuName + '"菜单吗？',
        "提示",
        {
          type: "warning",
        }
      )
        .then((res) => {
          upMenuStatus({
            status: row.status,
            menuId: row.menuId,
          }).then((res1) => {
            if (res1.code == 0) {
              this.$message.success(res1.msg);
            }
          });
        })
        .catch((err) => {
          row.status = row.status == 0 ? 1 : 0;
        });
    },
  },
};
</script>
<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  font-family: Microsoft YaHei;
  background: #fff;
}

.body {
  height: 100%;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: white;
  border-radius: $xr-border-radius-base;
  position: relative;
}
</style>